<template>
  <view>
    <div class="left">
      <view class="city-item" v-for="(v, i) in citys" :class="v.code" :key="i">
        <view class="title">{{v.code}}</view>
        <view class="city-list">
          <button @click="changeCity(item)" type="default" size="mini" class="city" v-for="(item, index) in v.cityList"
            :key="index">{{item}}</button>
        </view>
      </view>
    </div>
    <div class="right">
      <text v-for="(v, i) in citys" :key="i" :class="i === cityIndex ? 'active': ''"
        @click="changeCityIndex(i, v.code)">{{v.code}}</text>
    </div>
  </view>
</template>

<script>
  import citys from '../../static/city.json'
  export default {
    data() {
      return {
        citys: citys,
        cityIndex: 0
      };
    },
    methods: {
      changeCity(item) {
        uni.setStorageSync('city', item);
        uni.switchTab({
          url: "/pages/home/home"
        })
      },
      changeCityIndex(i, code) {
        this.cityIndex = i
        uni.pageScrollTo({
          selector: "." + code,
        })
      }
    },



  }
</script>

<style lang="scss">
  .left {
    width: 90%;

    .city-item {
      padding: 4px;

      .city {
        margin: 4px;
        width: 100px;
      }
    }

  }

  .right {
    position: fixed;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;

    text {
      margin: 2px 0;

      &.active {
        color: red;
      }
    }
  }
</style>
